{% extends "common/base.html" %}
{% block title %}商品评论{% endblock %}
{% block head %}
    <style>
        .flow-default {
            height: 80%;
            overflow: auto;
        }
        .flow-default li{
        }
    </style>
    {{ super() }}
{% endblock %}
{% block body %}
    <div class="layui-card">
        <div class="layui-card-header" style="text-align: center"><h3>{{ goods.goods_name }}</h3></div>
        <input id="goods_id" type="hidden" value="{{ goods_id }}" />
        <div class="layui-card-body">
            <div class="layui-row">
                <ul id="demo" class="flow-default"></ul>
            </div>
        </div>
    <div>
{% endblock %}
{% block jquery %}
    <script>
        $(function () {
            layui.use('flow', function () {
                var $ = layui.jquery; //不用额外加载jQuery，flow模块本身是有依赖jQuery的，直接用即可。
                var flow = layui.flow;
                flow.load({
                    elem: '#demo' //指定列表容器
                    ,isLazyimg:true
                    ,isAuto:true
                    , done: function (page, next) { //到达临界点（默认滚动触发），触发下一页
                        var lis = [];
                        //以jQuery的Ajax请求为例，请求下一页数据（注意：page是从2开始返回）
                        $.post('/reviews/getReviews', {'page': page, 'limit': '10', 'goods_id' : $("#goods_id").val()}, function (res) {
                            var jsonData = $.parseJSON(res);
                            //假设你的列表返回在data集合中
                            layui.each(jsonData.data, function (index, item) {
                                lis.push('<li>' + item.comment + '</li>');
                            });
                            //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                            //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
                            next(lis.join(''), page < jsonData.pages);
                        });
                    }
                });

            });


        })
    </script>
{% endblock %}
